import { Component, HostBinding, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

import { DialogService } from '../core/services/dialog.service';
import { Crisis } from './crisis.service';

@Component({
    template: `
    <h4>You are browsing the detail view right now.</h4>
    <div *ngIf="crisis">
      <h3>"{{ editName }}"</h3>
      <div>
        <label for="">Id: </label>
        {{ crisis.id }}
      </div>
      <div>
        <label for="">Name:</label>
        <input [(ngModel)]="editName" placeholder="name" />
      </div>
      <p>
        <button (click)="save()">Save</button>
        <button (click)="cancel()">Cancel</button>
      </p>
    </div>
  `,
    styles: ['input {width: 20em}']
})
export class CrisisDetailComponent implements OnInit {
    @HostBinding('@routeAnimation') routeAnimation = true;
    @HostBinding('style.display') display = 'block';
    @HostBinding('style.position') position = 'absolute';

    crisis: Crisis;
    editName: string;

    constructor(
        private route: ActivatedRoute,
        private router: Router,
        public dialogService: DialogService
    ) { }

    ngOnInit(): void {
        this.route.data.subscribe((data: { crisis: Crisis }) => {
            if (data.crisis) {
                this.editName = data.crisis.name;
                this.crisis = data.crisis;
            }
        });

        console.log('Checked');
    }

    cancel(): void {
        this.gotoCrises();
    }

    save(): void {
        this.crisis.name = this.editName;
        this.gotoCrises();
    }

    canDeactivate(): Promise<boolean> | boolean {
        // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
        if (!this.crisis || this.crisis.name === this.editName) {
            return true;
        }

        // Otherwise ask the user with the dialog service and return its
        // promise which resolves to true or false when the user decides
        return this.dialogService.confirm('Discard changes?');
    }

    gotoCrises(): void {
        let crisisId = this.crisis ? this.crisis.id : null;

        // Pass along the crisis id if available
        // so that the CrisisListComponent can select that crisis.
        // Add a totally useless `foo` parameter for kicks.
        // Relative navigation back to the crises
        this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route });
    }
}